<template>
	<view class="content">
		<!-- 真实姓名 -->
		<view class="phoneContent">
			<view class="name">真实姓名</view>
			<input placeholder="请输入您的真实姓名" placeholder-class="placeholder" class="input" v-model="realName" type="text" />
		</view>
		<!-- 充值金额 -->
		<view class="phoneContent">
			<view class="name">充值金额</view>
			<input placeholder="请输入您的充值金额" placeholder-class="placeholder" class="input" v-model="rechargeMoney" type="number" />
		</view>
		<!-- 充值账号 -->
		<view class="phoneContent">
			<view class="name">充值账号</view>
			<input placeholder="请输入您的充值账号" placeholder-class="placeholder" class="input" v-model="rechargeAccount" type="number" />
		</view>
		<!-- 上传打款凭证 -->
		<view class="imgsContent">
			<view class="name">上传打款凭证</view>
			<view class="imgsListContent">
				<view class="imgsList">
					<view class="uploadContent" v-for="(img,index) in images" :key="index">
						<image src="../../static/recharge/close.png" class="closeImg" @tap="delImgs(index)"></image>
						<image :src="img.url" class="img" ></image>
					</view>
				</view>
				<image src="../../static/recharge/uploadImg.png" class="uploadImg" v-if="images.length < 3" @tap="chooseImg"></image>
			</view>
		</view>
		<!-- 提交 -->
		<view class="submit" @tap="submit">提交</view>
	</view>
</template>

<script>
	import store from '../../store/index.js'
	import { addProof,uploadBatch } from '../../api/api.js'
	export default {
		data() {
			return {
				// 真实姓名
				realName:'',
				// 充值金额
				rechargeMoney:'',
				// 充值账号
				rechargeAccount:'',
				// 上传图片列表
				images:[],
				fileImages:[]
			}
		},
		methods: {
			// 点击上传凭证
			chooseImg() {
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['camera', 'album'], //从相册选择
					success: res => {
						uni.showLoading({
							title:'图片上传中，请稍后',
							icon:'loading'
						})
						uni.uploadFile({
							url:store.state.baseUrl + '/api/common/uploadBatch',
							filePath: res.tempFilePaths[0],
							name: 'file',
							success:res=> {
								uni.hideLoading()
								let path = JSON.parse(res.data);
								if (this.images.length > 0) {
									this.images = this.images.concat(path.data)
								} else {
									this.images = path.data;
								}
							}
						})
					}
				})
			},
			// 删除图片
			delImgs(index) {
				this.images.splice(index, 1)
			},
			// 提交
			submit() {
				if( !this.realName ) {
					uni.showToast({
						icon:'none',
						title:'请输入您的真实姓名'
					})
					return false
				}
				if( !this.rechargeMoney ) {
					uni.showToast({
						icon:'none',
						title:'请输入您的充值金额'
					})
					return false
				}
				if( !this.rechargeAccount ) {
					uni.showToast({
						icon:'none',
						title:'请输入您的充值账号'
					})
					return false
				}
				uni.showLoading()
				var picture = this.images.map((item,index) => {
					return item.url
				}).join(",")
				let data = {
					realName:this.realName,
					rechargeMoney:this.rechargeMoney,
					rechargeAccount:this.rechargeAccount,
					proofPicture:picture,
					payType:1,
					type:2,
				}
				addProof(data).then( res=> {
					uni.hideLoading()
					uni.showToast({
						icon:'none',
						title:'上传成功，请等待审核'
					})
					setTimeout(function() {
						uni.navigateBack({
							delta:4
						})
					},1000)
				})
			}
		}
	}
</script>

<style lang="less">
  .content {
		display: flex;
		align-items: center;
		flex-direction: column;
		// 手机号
		.phoneContent {
			margin-top: 50rpx;
			width: 690rpx;
			.name {
				font-size: 28rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: rgba(0, 0, 0, 0.85);
				line-height: 40rpx;
			}
			.placeholder {
				font-size: 26rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #999999;
				line-height: 37rpx;
			}
			.input {
				margin-top: 20rpx;
				height: 77rpx;
				width: 100%;
				border-bottom: 2px solid #F2F2F2;
			}
		}
		// 上传打款凭证
		.imgsContent {
			margin-top: 40rpx;
			width: 690rpx;
			.name {
				font-size: 28rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: rgba(0, 0, 0, 0.85);
				line-height: 40rpx;
			}
			.imgsListContent {
				margin-top: 53rpx;
				display: flex;
				align-items: center;
				.imgsList {
					display: flex;
					align-items: center;
					.uploadContent {
						position: relative;
						margin-right: 38rpx;
						width: 168rpx;
						height: 168rpx;
						.closeImg {
							position: absolute;
							top: -17rpx;
							right: -17rpx;
							width: 34rpx;
							height: 34rpx;
						}
						.img {
							width: 100%;
							height: 100%;
							border-radius: 8rpx;
						}
					}
				}
				.uploadImg {
					width: 170rpx;
					height: 170rpx;
				}
			}
		}
		// 提交
		.submit {
			margin-top: 104rpx;
			text-align: center;
			line-height: 90rpx;
			width: 690rpx;
			height: 90rpx;
			background: #FE3B33;
			border-radius: 45rpx;
			font-size: 28rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
		}
	}
</style>
